<template>
  <a-modal
    title="查看详情"
    class="large-modal"
    centered
    :visible="visible"
    @cancel="visible = false"
  >
    <div
      class="box-content"
      ref="boxContent"
      v-loading="spinning"
    >
      <title-name title="项目信息" />
      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="分公司"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.branchCompanyName"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="项目名称"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.projectName"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="项目编号"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.projectNum"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="项目经理"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.projectManager"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="日志日期"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.logDate"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="上午天气"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.morningWeatherName"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="下午天气"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.afterNoonWeatherName"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="最高温度（˚C）"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.temperatureMax"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="最低温度（˚C）"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.temperatureMin"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="风力"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.windPower"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="PM2.5"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.pm"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="有无突发事件"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.whetherEmergencyName"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          v-if="emergencyInfo"
          :md="24"
          :sm="24"
        >
          <a-form-item
            label="突发事件说明"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.emergencyInstructions"
              type="textarea"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <!-- <a-row :gutter="24">
        <a-col :md="24" :sm="24">
          <a-form-item
            label="突发事件说明"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput v-model="dels.emergencyInstructions" type="textarea" disabled />
          </a-form-item>
        </a-col>
      </a-row> -->
      <a-row :gutter="24">
        <a-col
          :md="24"
          :sm="24"
        >
          <a-form-item
            label="当天主要施工项目"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.majorConstructionProjects"
              type="textarea"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>

      <title-name title="生产情况记录（当日施工项目内容、机械作业、班组工作、生产存在问题）" />
      <div class="second-box">
        <title-name title="基本情况" />
        <div
          style="margin-left: 30px"
          class="mb20"
        >
          <div
            class="mb12"
            style="font-size: 14px"
          >出勤人数：</div>
          <s-table
            ref="table"
            size="default"
            bordered
            row-key="id"
            :columns="columns"
            :data="loadData"
            :show-pagination="false"
            :scroll="{ y: 600 }"
          >
            <template slot="footer"> 总人数：{{ total }} </template>
          </s-table>
        </div>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="机械、设备使用情况（主要机械情况）"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.equipmentUsage"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>

        <title-name title="工作内容" />
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="当天施工内容实际完成情况及主要工程量"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.majorWorks"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="使用的主要材料规格、数量（日消耗量）"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.materialUsage"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="施工现场有关会议内容（主要简要概述）"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.constructionSiteMeetingContent"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              label="试块制作情况"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.productionOfTestBlock"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="材料进场、送检情况及当日取回试验报告编号及结果"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.materialConditions"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>

        <title-name title="技术质量安全工作记录（技术质量安全活动、技术质量安全问题、检查验收情况等）" />
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="建设单位及监理单位对本工程实施工提出的技术、质量、安全、进度要求、意见及采纳实施情况"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.implementation"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row
          :gutter="24"
          style="margin-top: 15px"
        >
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="往来函件（设计变更、洽商记录、工程联系单等文件编号及内容简要概述）"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.currentLetter"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>

        <title-name title="检查情况" />
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="质量自检情况及整改措施"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.qualitySelfInspectionAndCorrectiveAction"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="监理单位对相应工程部位的检查结果"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.supervisionInspectionResults"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              label="安全"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.safety"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="监理通知单情况（主要简要概述）"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.supervisionNoticeSituation"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="监理安全隐患整改回复情况（主要内容简要概述）"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.safetyRiskRectificationNotice"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="安全文明施工、环保等检查情况"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.safetyCivilizedConstructionInspection"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              class="titleLabel"
              label="其他情况（如有上级或其他单位的安全质量检查情况）"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.otherSituations"
                type="textarea"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="填写人"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.writtenBy"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="填写时间"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.writeTime"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>

        <title-name title="相关附件信息" />
        <a-form-model-item
          label="当日整体形象航拍照片"
          :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          prop="aerialPhotoFileList"
        >
          <template v-if="dels.aerialPhotoFileList && dels.aerialPhotoFileList.length">
            <l-table
              uploadType="image"
              business-code="PM20"
              :disabled="true"
              :upload-arrys.sync="dels.aerialPhotoFileList"
            ></l-table>
            <ellipsis
              tooltip
              :length="12"
              class="fileItem"
              v-for="(item, index) in dels.aerialPhotoFileList"
              :key="index"
            >{{ item.name || item.fileName }}</ellipsis>
          </template>
          <span v-else>无</span>
        </a-form-model-item>
        <a-form-model-item
          label="室内代表性部位施工进度照片"
          :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          prop="progressPhotoFileList"
        >
          <template v-if="dels.progressPhotoFileList && dels.progressPhotoFileList.length">
            <l-table
              uploadType="image"
              business-code="PM20"
              :upload-arrys.sync="dels.progressPhotoFileList"
              :disabled="true"
            ></l-table>
            <ellipsis
              tooltip
              :length="12"
              class="fileItem"
              v-for="(item, index) in dels.progressPhotoFileList"
              :key="index"
            >{{ item.name || item.fileName }}</ellipsis>
          </template>
          <span v-else>无</span>
        </a-form-model-item>
        <a-form-model-item
          label="其他附件"
          :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          prop="fileIds"
        >
          <file-link :file-list="dels.fileArrays"></file-link>
          <!-- <ellipsis tooltip :length="12" class="fileItem" v-for="(item, index) in dels.fileArrays" :key="index">{{
            item.name || item.fileName
          }}</ellipsis> -->
        </a-form-model-item>

        <title-name
          title="核查"
          style="margin-top: 20px"
        />
        <a-row
          v-if="isCheck == 1"
          :gutter="24"
        >
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              label="核查备注信息"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseTextarea
                v-model="dels.checkRemarkInformation"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row
          v-if="isCheck == 0"
          :gutter="24"
        >
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-item
              label="核查备注信息"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseTextarea
                v-model="dels.checkRemarkInformation"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
      </div>
    </div>
    <!-- 页脚操作栏 -->
    <div
      slot="footer"
      class="btn_box"
    >
      <a-button
        type="primary"
        @click="visible = false"
      > 关闭 </a-button>
    </div>
  </a-modal>
</template>
<script>
import { STable, Ellipsis } from '@/components'
import { getLogUserDetails } from '@/api/project/constructionLog'
const columns = [
  {
    title: '序号',
    width: 65,
    customRender() {
      return arguments[2] + 1
    }
  },
  {
    title: '分包商',
    dataIndex: 'subcontractorsName'
  },
  {
    title: '分部分项',
    dataIndex: 'partialAllName'
  },
  {
    title: '工种',
    dataIndex: 'jobType.name'
  },
  {
    title: '人数',
    width: 100,
    dataIndex: 'attendanceNumber'
  }
]
export default {
  name: 'DialogDetail',
  components: {
    Ellipsis,
    STable
  },
  props: {
    // 请求参数
    queryParams: { type: Object, default: () => ({}) }
  },
  computed: {
    // 出勤总人数
    total() {
      return this.dels?.attendanceList?.length ? this.dels.attendanceList.map((i) => i?.attendanceNumber)?.reduce((total, pre) => (total || 0) + (pre || 0)) : 0
    }
  },
  data() {
    this.columns = columns
    return {
      spinning: false,
      visible: false,
      isCheck: null, // 是否是核查
      loadData: () => {
        return Promise.resolve({
          code: 200,
          data: this.dels.attendanceList || []
        })
      }, // 出勤人数回调
      emergencyInfo: false,
      dels: {} // 表单
    }
  },
  mounted() {
    this.isCheck = this.$route.query.isCheck
  },
  watch: {
    visible(e) {
      if (e) {
        this.spinning = true
        getLogUserDetails(this.queryParams)
          .then((res) => {
            this.spinning = false
            if (res.code === 200) {
              this.dels = res.data
              this.$refs.table.refresh(true)
              if (this.dels.whetherEmergency == 1) {
                this.emergencyInfo = true
              } else {
                this.emergencyInfo = false
              }
            }
          })
          .catch(() => {
            this.spinning = false
          })
      } else {
        this.dels = {}
        // 置顶滚轴
        this.$refs.boxContent.scrollTop = 0
      }
    }
  }
}
</script>
<style lang="less" scoped>
.fileItem {
  text-align: center;
  display: inline-block;
  width: 104px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}
.box-content {
  width: 100%;
  height: calc(var(--heightVh) * 0.7 - 96px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  scrollbar-track-color: #fff;
  -ms-scrollbar-track-color: transparent;
  &::-webkit-scrollbar {
    background: #fff;
    width: 8px;
    height: 8px;
    // display: none;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    width: 8px;
    border-radius: 8px;
    border: 1px #fff solid;
    background: #ccc;
  }
}
.titleLabel textarea.ant-input {
  max-width: 100%;
  height: auto;
  min-height: 115px;
  line-height: 1.5;
  vertical-align: bottom;
  transition: all 0.3s, height 0s;
}
.second-box .titleName {
  font-size: 14px !important;
  margin-left: 12px;
}
</style>
